<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>基础的虚拟滚动 ---- 定高</title>
  <!-- 引入 Ant Design Vue 的样式文件 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/2.2.6/antd.min.css">
</head>

<body>
<div id="app">
  <div class="box" >
    <div  v-for="(v, i) in list" class="item" :class="[`item${i}`]" :key="i" :ref="[`item${i}`]">
      {{ v.name }}
    </div>
  </div>
</div>

<!-- 引入 Vue 和 Ant Design Vue 的脚本文件 -->
<script src="../vue.js"></script>

<script>

  new Vue({
    el: '#app',
    components: {},
    data() {
      return {
        time: 0,
        prevAdd: false,
        lastScrollTop: 0,
        list: [
          { name: 1 },
          { name: 2 },
          { name: 3 },
          { name: 4 },
          { name: 5 },
          { name: 6 },
          { name: 7 },
          { name: 8 }
        ]
      };
    },
    mounted() {
      const that = this
      // const shiftArrayElements = (arr) => {
      //   return arr.map((_, index, array) => array[(index + 1) % array.length])
      // }
      const item0 = document.querySelector('.item.item0')
      let flag = 1 // 代表正序
      window.explodedFiguresTimer && clearInterval(window.explodedFiguresTimer)
      window.explodedFiguresTimer = setInterval(()=> {


        if (flag > 0) {
          let x = this.time  * 100
          item0.style.transform = `translateX(${x}%)`
          if(this.time === 4) {
            flag  = -1
            x = 300
            this.time = 3
            item0.style.transform = `translateX(${x}%) translateY(100%)`
            return
          }
          this.time = this.time  + 1
        } else {
          let x = this.time  * 100
          item0.style.transform = `translateX(${x}%) translateY(100%)`
          if(this.time === 0) {
            flag  = 1
            return
          }
          this.time = this.time  - 1
        }


      }, 3000)

    },
    methods: {


    },
  });
</script>

<!-- 自定义的 CSS 样式 -->
<style>
  #app  {
    padding-top: 100px;
  }
  body {
    overflow: hidden;
  }
  .box {
    margin: 0 auto;
    margin-top: 150px;
    width: 400px;
    height: 300px;
    overflow: auto;
    border: 1px solid grey;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .item {
    width: calc(24% - 10px);
    height: 50px;
    border-bottom: 1px solid grey;
  }
  .item0{
    transition: 0.5s all ease;
    background: red;
  }


</style>
</body>

</html>
